<template>
	<view class="page-container">
		<!-- 吸顶部分 -->
		<u-sticky>
			<view class="header-top">
				<view class="header-top-left">
					<u-icon name="arrow-left" color="#fff" size="27" @click="onBack()"></u-icon>
				</view>
				<view class="header-top-center">
					任务中心
				</view>
				<view class="header-top-right" @click="handleNavBar">
					<image src="/static/index/checkin/checkinNavBarIcon.png" mode=""></image>
				</view>
			</view>
		</u-sticky>

		<!-- 可滚动内容 -->
		<scroll-view class="scroll-content" scroll-y="true">
			<view class="header">
				<view class="header-content">
					<view class="header-content-backGround">
						<image src="/static/index/checkin/checkinHeader.png" mode=""></image>
					</view>
					<view class="header-content-bear">
						<image src="/static/index/checkin/bear.png" mode=""></image>
					</view>

					<view class="header-content-header-title">
						<view class="header-content-header-title-left">
							<view class="header-content-header-title-left-imgBox">
								<image src="/static/index/checkin/checkin-badge.png" mode=""></image>
							</view>
							<view class="header-content-header-title-left-text">
								我的蜂蜜
							</view>
						</view>
						<view class="header-content-header-title-right" @click="handleToBadgeWall()">
							<view class="header-content-header-title-right-imgBox">
								<image src="/static/index/checkin/checkin-honey.png" mode=""></image>
							</view>
							<view class="header-content-header-title-right-text">
								我的徽章
							</view>
						</view>
					</view>

					<view class="header-content-header-value">
						<view class="header-content-header-value-left">
							<view class="header-content-header-value-left-imgBox">
								298
							</view>
							<view class="header-content-header-value-left-text">
								<u-icon name="arrow-right" color="rgba(120, 120, 130, 1)" size="10"></u-icon>
							</view>
						</view>
						<view class="header-content-header-value-right" @click="handleToBadgeWall()">
							<view class="header-content-header-value-right-imgBox">
								30
							</view>
							<view class="header-content-header-value-right-text">
								<u-icon name="arrow-right" color="rgba(120, 120, 130, 1)" size="10"></u-icon>
							</view>
						</view>
					</view>

					<view class="header-content-footer-header">
						<view class="header-content-footer-header-title">
							已连续签到2天
						</view>
						<view class="header-content-footer-header-image">
							<image src="/static/index/checkin/question-mark.png" mode=""></image>
						</view>
					</view>
					<view class="header-content-footer-unheader">
						再连续签到4天，可获得10蜂蜜
					</view>

					<view class="header-content-footer-checkIn">
						<view class="header-content-footer-checkIn-box" v-for="(item,index) in checkInDateList"
							:key="index">
							<view class="header-content-footer-checkIn-top">
								<view class="header-content-footer-checkIn-top-img">
									<image v-if="!item.isChecked" src="/static/index/checkin/HoneyJar-selected.png"
										mode=""></image>
									<image v-else src="/static/index/checkin/HoneyJar-unSelected.png" mode=""></image>
								</view>
								<view v-if="item.isChecked" class="header-content-footer-checkIn-top-tag-unChecked">
									补签
								</view>
								<view v-else class="header-content-footer-checkIn-top-tag-Checked">
									签到
								</view>
							</view>
							<view class="header-content-footer-checkIn-bottom">
								{{item.date}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="footer">
				<view class="footer-header">
					<view class="footer-header-left">
						<view class="footer-header-left-image">
							<image src="/static/index/checkin/gold-coin.png" mode=""></image>
						</view>
						<view class="footer-header-left-title">
							<image src="/static/index/checkin/BeginnerMission.png" mode=""></image>
						</view>
					</view>
					<view class="footer-header-right">
						已完成2/4
					</view>
				</view>
				<!-- 新手任务 -->
				<view class="footer-content">
					<view class="footer-content-item" v-for="(item,index) in displayedMissionList" :key="index">
						<view class="footer-content-item-top">
							<view class="footer-content-item-top-left">
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/star-smile-fill.png" mode=""></image>
								</view>
								<view class="footer-content-item-top-title">
									{{item.tag}}
								</view>
							</view>
							<view class="footer-content-item-top-right">
								<view class="footer-content-item-top-title">
									{{item.Subtitle}}
								</view>
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/question-mark.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="footer-content-item-bottom">
							<view class="footer-content-item-bottom-left">
								{{item.rewardTag}}
							</view>
							<view class="footer-content-item-bottom-right">
								去完成
							</view>
						</view>
						<view class="bottom-line"></view>
					</view>

					<!-- 展开/收起按钮 -->
					<view class="footer-content-toggle" v-if="BeginnerMission.length > 2" @click="toggleMissionList">
						<view class="footer-content-toggle-text">
							{{ isMissionListExpanded ? '收起' : '展开更多' }}
						</view>
						<view class="footer-content-toggle-icon" :class="{ 'expanded': isMissionListExpanded }">
							<u-icon name="arrow-down" size="20" color="#FF7E16"></u-icon>
						</view>
					</view>
				</view>

				<!-- 限时任务 -->
				<view class="footer-header">
					<view class="footer-header-left">
						<view class="footer-header-left-image">
							<image src="/static/index/checkin/gold-coin2.png" mode=""></image>
						</view>
						<view class="footer-header-left-title2">
							<image src="/static/index/checkin/Time-limited-task.png" mode=""></image>
						</view>
					</view>
					<view class="footer-header-right">
						已完成2/4
					</view>
				</view>

				<!-- 限时任务 -->
				<view class="footer-content">
					<view class="footer-content-item" v-for="(item,index) in TimeLimitedTaskList" :key="index">
						<view class="footer-content-item-top">
							<view class="footer-content-item-top-left2">
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/star-smile-fill2.png" mode=""></image>
								</view>
								<view class="footer-content-item-top-title">
									{{item.tag}}
								</view>
							</view>
							<view class="footer-content-item-top-right">
								<view class="footer-content-item-top-title">
									{{item.Subtitle}}
								</view>
								<view class="footer-content-item-top-image">
									<image src="/static/index/checkin/question-mark.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="footer-content-item-bottom">
							<view class="footer-content-item-bottom-left">
								{{item.rewardTag}}
							</view>
							<view class="footer-content-item-bottom-right">
								去完成
							</view>
						</view>
						<view class="bottom-line"></view>
					</view>
				</view>

				<view class="footer-banner">
					<image src="/static/index/checkin/poster.png" mode=""></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getPosts,
		topicsList
	} from '@/request/api.js';
	export default {
		data() {
			return {
				isHeaderSticky: true,
				checkInDateList: [],
				BeginnerMission: [{
						tag: "初来乍到",
						title: '完善个人资料',
						rewardTag: "蜂蜜+30",
						Subtitle: '完善个人资料'
					},
					{
						tag: "连签奖励",
						title: '连续签到3天解锁奖励',
						rewardTag: "连续签到，第三天蜂蜜+50",
						Subtitle: '连续签到3天解锁奖励'
					},
					{
						tag: "发帖奖励",
						title: '成功发布一条本地/避坑/游记贴',
						rewardTag: "任意发布一条帖子，蜂蜜+80",
						Subtitle: '成功发布一条本地/避坑/游记贴'
					}
				],
				TimeLimitedTaskList: [{
						tag: "城市探索者",
						title: '1个月内发布3条不同城市游记',
						rewardTag: "解锁“跨城玩家”称号",
						Subtitle: '1个月内发布3条不同城市游记'
					},
					{
						tag: "避坑王者",
						title: '单周获得10次“避坑贴”点赞',
						rewardTag: "获得头像挂“人间清醒”周榜标识",
						Subtitle: '单周获得10次“避坑贴”点赞'
					},
				],
				isMissionListExpanded: true, // 控制是否展开
				defaultMissionCount: 2 // 默认显示的任务数量

			};
		},
		// 添加计算属性
		computed: {
			displayedMissionList() {
				if (this.isMissionListExpanded || this.BeginnerMission.length <= this.defaultMissionCount) {
					return this.BeginnerMission;
				}
				return this.BeginnerMission.slice(0, this.defaultMissionCount);
			}
		},
		onLoad() {
			// 签到的日期显示逻辑处理
			this.generateCheckInDateList();
		},
		onReachBottom() {},
		methods: {
			// 去徽章墙
			handleToBadgeWall() {
				console.log(111);
				uni.navigateTo({
					url: '/pages_sub/user/BadgeWall/BadgeWall'
				})
			},
			onBack() {
				uni.navigateBack();
			},
			// 蜂蜜中心
			handleNavBar() {

			},
			// 切换任务列表展开/收起状态
			toggleMissionList() {
				this.isMissionListExpanded = !this.isMissionListExpanded;
			},
			handleScroll(e) {
				const scrollTop = e.detail.scrollTop;
				this.isScroll = e.detail.scrollTop > 0
				// 控制探索本地圈吸顶
				this.isExploreSticky = scrollTop > this.exploreStickyThreshold;
			},
			generateCheckInDateList() {
				const today = new Date();
				this.checkInDateList = [];

				for (let i = 0; i < 7; i++) {
					const date = new Date(today);
					date.setDate(today.getDate() + i);

					const month = date.getMonth() + 1;
					const day = date.getDate();
					const weekday = date.getDay();

					// 星期几的中文映射
					const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

					// 修改日期格式：9月24日
					const formattedDate = `${month}.${day}`;

					this.checkInDateList.push({
						date: formattedDate, // 修改这里
						weekday: weekdays[weekday],
						isToday: i === 0, // 标记今天
						isChecked: false // 默认未签到
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		background-color: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: url(/static/index/checkin/MissionCenter.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-overflow-scrolling: touch;

		.header-top {
			padding: 74rpx 30rpx 0;
			height: 72rpx;
			line-height: 72rpx;
			display: flex;
			justify-content: space-between;
			background-color: transparent; // 保持透明，显示背景图

			.header-top-left {
				height: 56rpx;
				display: flex;

				.header-top-left-image {
					width: 44rpx;
					height: 44rpx;
				}

				.header-top-left-titleImage {
					margin-left: 10rpx;
					width: 200rpx;
					height: 56rpx;
				}
			}

			.header-top-center {
				font-size: 32rpx;
				font-weight: 700;
				color: #fff;
			}

			.header-top-right {
				image {
					margin: 5rpx 0;
					width: 74rpx;
					height: 62rpx;
				}
			}
		}

		.scroll-content {
			flex: 1;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.header {
			width: 100%;
			padding-bottom: 20rpx;

			.header-content {
				position: relative; // 确保父元素有定位属性

				.header-content-backGround {
					width: calc(100% - 60rpx);
					height: 256rpx;
					margin: 184rpx 30rpx 0;
					position: relative; // 添加定位属性
					z-index: 2; // 设置较高的z-index值

					image {
						width: 100%;
						height: 256rpx;
					}
				}

				.header-content-bear {
					position: absolute;
					width: 204rpx;
					height: 280rpx;
					right: 42rpx;
					bottom: 176rpx;
					z-index: 1; // 设置较低的z-index值，确保在背景图片下方

					image {
						width: 204rpx;
						height: 280rpx;
					}
				}

				.header-content-header-title {
					display: flex;
					position: absolute;
					width: 50%;
					bottom: 350rpx;
					left: 44rpx;
					z-index: 10;

					.header-content-header-title-left {
						display: flex;
						margin-right: 50rpx;

						.header-content-header-title-left-imgBox {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.header-content-header-title-left-text {
							font-size: 28rpx;
							line-height: 40rpx;
							color: rgba(255, 255, 255, 1);
						}
					}

					.header-content-header-title-right {
						display: flex;
						.header-content-header-title-right-imgBox {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.header-content-header-title-right-text {
							font-size: 28rpx;
							line-height: 40rpx;
							color: rgba(255, 255, 255, 1);
						}
					}
				}

				.header-content-header-value {
					display: flex;
					position: absolute;
					width: 50%;
					bottom: 290rpx;
					left: 48rpx;
					z-index: 10;

					.header-content-header-value-left {
						display: flex;
						margin-right: 100rpx;

						.header-content-header-value-left-imgBox {
							font-size: 40rpx;
							font-weight: 500;
							line-height: 40rpx;
							color: #fff;
							margin-right: 20rpx;
						}

						.header-content-header-value-left-text {
							margin: 10rpx 0;
						}
					}

					.header-content-header-value-right {
						display: flex;

						.header-content-header-value-right-imgBox {
							font-size: 40rpx;
							font-weight: 500;
							line-height: 40rpx;
							color: #fff;
							margin-right: 20rpx;
						}

						.header-content-header-value-right-text {
							margin: 10rpx 0;
						}
					}
				}

				.header-content-footer-header {
					display: flex;
					position: absolute;
					width: 50%;
					bottom: 200rpx;
					left: 50rpx;
					z-index: 10;
					height: 40rpx;
					line-height: 40rpx;

					.header-content-footer-header-title {
						color: rgba(0, 0, 0, 1);
						font-weight: 900;
						font-size: 30rpx;

					}

					.header-content-footer-header-image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 12rpx;

						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.header-content-footer-unheader {
					display: flex;
					position: absolute;
					width: 50%;
					bottom: 158rpx;
					left: 50rpx;
					z-index: 10;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 22rpx;
					color: rgba(77, 77, 86, 1);
				}

				.header-content-footer-checkIn {
					position: absolute;
					width: calc(100% - 100rpx);
					bottom: 20rpx;
					left: 50rpx;
					z-index: 10;
					display: flex;
					justify-content: space-between;

					.header-content-footer-checkIn-box {
						width: 90rpx;

						.header-content-footer-checkIn-top {
							width: 90rpx;
							height: 100rpx;
							background-color: rgba(255, 255, 255, 1);
							display: flex; // 添加flex布局
							flex-direction: column; // 垂直排列
							align-items: center; // 水平居中
							justify-content: center; // 垂直居中
							border-radius: 20rpx;

							.header-content-footer-checkIn-top-img {
								margin-top: 10rpx;
								width: 50rpx;
								height: 50rpx;
								display: flex; // 添加flex布局
								align-items: center; // 垂直居中
								justify-content: center; // 水平居中

								image {
									width: 50rpx;
									height: 50rpx;
								}
							}

							.header-content-footer-checkIn-top-tag-unChecked {
								height: 30rpx;
								line-height: 30rpx;
								width: calc(100% - 10rpx);
								background-color: rgba(217, 217, 217, 1);
								color: rgba(120, 120, 130, 1);
								font-weight: 400;
								font-size: 20rpx;
								border-radius: 20rpx;
								text-align: center;
								margin: 5rpx auto 5rpx; // 调整margin，添加顶部间距
							}

							.header-content-footer-checkIn-top-tag-Checked {
								height: 30rpx;
								line-height: 30rpx;
								width: calc(100% - 10rpx);
								background-color: rgba(250, 128, 22, 1);
								color: rgba(255, 255, 255, 1);
								font-weight: 400;
								font-size: 20rpx;
								border-radius: 20rpx;
								text-align: center;
								margin: 5rpx auto 5rpx; // 调整margin，添加顶部间距
							}
						}

						.header-content-footer-checkIn-bottom {
							color: rgba(120, 120, 130, 1);
							font-size: 26rpx;
							font-weight: 500;
							text-align: center;
						}
					}

				}
			}


		}

		.footer {
			background: linear-gradient(to bottom, rgba(255, 252, 237, 1), rgba(237, 253, 250, 1));
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			padding: 30rpx;
			min-height: calc(100vh - 400rpx);

			.footer-header {
				display: flex;
				justify-content: space-between;
				height: 56rpx;
				line-height: 56rpx;
				margin-bottom: 20rpx;

				.footer-header-left {
					display: flex;

					.footer-header-left-image {
						width: 56rpx;
						height: 56rpx;
						margin-right: 10rpx;

						image {
							width: 56rpx;
							height: 56rpx;
						}
					}

					.footer-header-left-title {

						image {
							margin: 12rpx 0;
							width: 120rpx;
							height: 32rpx;
						}
					}

					.footer-header-left-title2 {

						image {
							margin: 12rpx 0;
							width: 248rpx;
							height: 32rpx;
						}
					}
				}

				.footer-header-right {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(77, 77, 86, 1);
				}
			}

			.footer-content {
				background-color: #fff;
				width: calc(100% - 40rpx);
				height: auto;
				border-radius: 30rpx;
				padding: 30rpx 20rpx;
				margin-bottom: 20rpx;

				.footer-content-item {

					.footer-content-item-top {
						display: flex;

						.footer-content-item-top-left {
							display: flex;
							background-color: rgba(250, 225, 62, 1);
							border-radius: 10rpx;
							height: 30rpx;
							line-height: 30rpx;
							padding: 4rpx 8rpx;
							margin-right: 10rpx;

							.footer-content-item-top-image {
								width: 24rpx;
								height: 24rpx;

								image {
									width: 24rpx;
									height: 24rpx;
								}
							}

							.footer-content-item-top-title {
								color: rgba(0, 0, 0, 1);
								font-weight: 500;
								font-size: 20rpx;
							}
						}

						.footer-content-item-top-left2 {
							display: flex;
							background-color: rgba(111, 232, 6, 1);
							border-radius: 10rpx;
							height: 30rpx;
							line-height: 30rpx;
							padding: 4rpx 8rpx;
							margin-right: 10rpx;

							.footer-content-item-top-image {
								width: 24rpx;
								height: 24rpx;

								image {
									width: 24rpx;
									height: 24rpx;
								}
							}

							.footer-content-item-top-title {
								color: rgba(0, 0, 0, 1);
								font-weight: 500;
								font-size: 20rpx;
							}
						}

						.footer-content-item-top-right {
							display: flex;
							height: 30rpx;
							line-height: 30rpx;
							padding: 4rpx 8rpx;

							.footer-content-item-top-image {
								margin-left: 10rpx;
								width: 24rpx;
								height: 24rpx;

								image {
									width: 24rpx;
									height: 24rpx;
								}
							}

							.footer-content-item-top-title {
								color: rgba(0, 0, 0, 1);
								font-weight: 900;
								font-size: 20rpx;
								font-weight: 500;
								font-size: 28rpx;
								color: rgba(0, 0, 0, 1);
							}
						}
					}

					.footer-content-item-bottom {
						display: flex;
						justify-content: space-between;
						margin-top: 12rpx;

						.footer-content-item-bottom-left {
							background-color: rgba(255, 243, 237, 1);
							border-radius: 10rpx;
							color: rgba(0, 0, 0, 1);
							font-weight: 400;
							font-size: 24rpx;
							padding: 2rpx 10rpx;
							height: 40rpx;
							line-height: 40rpx;
						}

						.footer-content-item-bottom-right {
							width: 100rpx;
							height: 40rpx;
							line-height: 40rpx;
							color: #fff;
							font-size: 24rpx;
							font-weight: 500;
							background-color: rgba(250, 128, 22, 1);
							border-radius: 16rpx;
							text-align: center;
							padding: 2rpx 10rpx;
						}
					}

					.bottom-line {
						margin: 24rpx 0;
						border-bottom: 2rpx solid rgba(244, 244, 244, 1);
					}
				}

				// 添加展开/收起按钮样式
				.footer-content-toggle {
					display: flex;
					justify-content: center;
					align-items: center;
					// padding: 20rpx 0;
					cursor: pointer;

					.footer-content-toggle-text {
						font-size: 24rpx;
						color: #FF7E16;
						font-weight: 500;
						margin-right: 10rpx;
					}

					.footer-content-toggle-icon {
						transition: transform 0.3s ease;

						&.expanded {
							transform: rotate(180deg);
						}
					}
				}
			}
		}

		.footer-banner {
			width: 100%;
			height: 382rpx;

			image {
				width: 100%;
				height: 382rpx;
			}
		}
	}
</style>